<!--
加减按钮
props：
max：最大值，默认10
min：最小值，默认0
v-model：传值
-->
<template>
  <div class="container">
    <i class="fas fa-plus-circle float-right" @click="add"></i>
    <input type="number" class="float-right" :value="value" @input="$emit('input', $event.target.value)">
    <i @click="subtract" class="fas fa-minus-circle float-right"></i>
  </div>
</template>
<style lang="less" scoped>
@import url('./theme.less');
  @import url('../../style/mixin.less');
  .container {
    width: @number-input-width+@number-btn-size*2;
    margin: 0 auto;
    input {
      width: @number-input-width;
      border: none;
      height: @number-container-height;
      line-height: @number-container-height;
      background: none;
      text-align: center;
      .placeholder;
    }
    i {
      height: @number-btn-size;
      line-height: @number-container-height;
      font-size: 20px;
      width: @number-btn-size;
      border-radius: @number-btn-size;
      color: @number-btn-color;
    }
  }

</style>
<script>
  export default {
    props: {
      value: {},
      min:{
          default: 0
      },
      max:{
          default: 10
      }
    },
    methods: {
      add() {
        if (this.value === this.max) return;
        this.value++;
        this.$emit('input', this.value);
      },
      subtract() {
        if (this.value === this.min) return;
        this.value--;
        this.$emit('input', this.value);
      }
    },
    mounted(){
        if(this.value>this.max) this.value=this.max
        if(this.value<this.min) this.value=this.min    
    }
  }

</script>
